// import { useState } from 'react'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
// import "./App.css";
import { Background, ReactFlow, ReactFlowProvider, useNodesState, type Node } from '@xyflow/react'
import '@xyflow/react/dist/style.css'
import { useEffect } from 'react'
import CustomConnectionLine from './flow/CustomConnectionLine'

function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])

  const handleConnectStart = () => {
    console.log(1)
  }

  useEffect(() => {
    setNodes([
      {
        id: 'a1',
        type: 'input',
        data: {
          label: 'a',
        },
        position: { x: 100, y: 100 },
      },
      {
        id: 'a2',
        type: 'default',
        data: {
          label: 'b',
        },
        position: { x: 100, y: 200 },
      },
    ])
  }, [setNodes])

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlowProvider>
        <ReactFlow nodes={nodes} onNodesChange={onNodesChange} connectionLineComponent={CustomConnectionLine} fitView colorMode="dark" onConnectEnd={handleConnectStart}>
          <Background />
        </ReactFlow>
      </ReactFlowProvider>
    </div>
  )
}

export default App
